<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>为朋友点歌</title>
    <link rel="stylesheet" href="./css/orderPage.css">
    <link rel="stylesheet" href="../indexPage/css/animsition.min.css">
</head>
<body>
<div class="animsition">
    <div class="main">
        <header>
            <div class="nav">
                <a href="../../index.html" class="animsition-link">
                    <img src="../accountInfoPage/img/backIcon.png" style="width: 0.8rem;height: 1.1rem;">
                </a>
                <span>点歌</span>
                <a href="../accountInfoPage/accountPage.html" class="animsition-link">
                    <img src="../indexPage/img/headIcon.png" alt="">
                </a>
            </div>
        </header>
        <div class="two-header">
            <span>是非成败转头空 , 青山依旧在 , 惯看秋月春风 。  一壶浊酒喜相逢 , 古今多少事 , 滚滚长江东逝水 , 浪花淘尽英雄 , 几度夕阳红。</span>
        </div>
        <form method="post" name="form" action="" onSubmit="return beforeSubmit(this);">
            <div class="form-item">
                <span class="label">歌名</span>
                <br>
                <input type="text" name="songName" value="">
            </div>
            <div class="form-item">
                <span class="label">歌手</span>
                <br>
                <input type="text" name="singerName" value="">
            </div>
            <div class="form-item">
                <span class="label">送给的人</span>
                <br>
                <input type="text" name="orderTo" value="">
            </div>
            <div class="form-item" >
                <span class="label">想说的话</span>
                <br>
                <input type="text" name="longWords" id="longWords" value="">
            </div>
            <div class="form-item">
                <div class="anonymity">
                    <div class="checkbox">
                        <div class="noName">
                            <input type="checkbox" value="">
                        </div>
                    </div>
                    <span>是否匿名</span>
                </div>
                <button type="submit" id="button">确定</button>
            </div>
            <div id="darker">
                <textarea name="textarea" id="textarea" cols="30" rows="10">

                </textarea>
            </div>
        </form>
    </div>
</div>
<script src="../commonJs/jquery-1.11.0.min.js"></script>
<script src="../commonJs/jquery.animsition.min.js"></script>
<script src="./js/verify.js"></script>
<script>
    $(".main").height(window.innerHeight);
    $("form").height(window.innerHeight - 11.5 * 16);
    var offsetTop=($("#longWords").position().top - 3.2 * 16)+"px";
    $("#textarea").css("margin-top",offsetTop);
    $("#textarea").on("click", function (e) {
        e.stopPropagation();
    });
    $("#longWords").on("focus", function () {
        $("#darker").show();
        $("#textarea")[0].focus();
    });
    $("#darker").on("click",function () {
        $("#longWords").val($("#textarea").val());
        $("#darker").hide();
    })
    $("input[type='checkbox']").on('click', function () {
        if ($(this).is(":checked")) {
            $(".noName").css("background-color", "#F89E35");
        }
        else
            $(".noName").css("background-color", "#B3B3B3");
    });
</script>
</body>
</html>